<template>
	<view class="content">
		<view class="list-box">
			<view class="title">
				供应商信息
			</view>
			<view class="item-box" v-if="info.supplierName">
				<view class="title">
					供应商名称
				</view>
				<view class="text">
					{{info.supplierName}}
				</view>
			</view>
			<view class="item-box" v-if="info.bankName">
				<view class="title">
					供应商银行
				</view>
				<view class="text">
					{{info.bankName}}
				</view>
			</view>
			<view class="item-box" v-if="info.bankNo">
				<view class="title">
					供应商行号
				</view>
				<view class="text">
					{{info.bankNo}}
				</view>
			</view>
			<view class="item-box" v-if="info.accountNo">
				<view class="title">
					供应商账号
				</view>
				<view class="text">
					{{info.accountNo}}
				</view>
			</view>
			<view class="item-box">
				<view class="title">
					申请时间
				</view>
				<view class="text">
					<uni-datetime-picker type="datetime" v-model="form.applyTime" @change="changeLog" />
				</view>
			</view>
			<view class="item-box">
				<view class="title">
					发票编号
				</view>
				<input class="text" v-model="form.invoiceCode" placeholder="请输入发票编号"/>
			</view>
			<view class="item-box">
				<view class="title">
					申请金额
				</view>
				<input class="text" v-model="form.totalMoney" placeholder="请输入申请金额" required/>
			</view>
			<view class="item-box">
				<view class="title">
					发票照片
				</view>
				<view class="photo-list">
					<view class="photo-item" @click="addphotoBackBnt" v-if="!form.invoicePhoto">
						<image class="images" src="@/static/images/index/add.png" mode=""></image>
					</view>
					<view v-else class="photo-item" @click="imgsBackBnt">
						<view class="close-box" @click.stop="imgbackBnt()">
							<image class="icon" src="@/static/images/index/guanbi.png" mode=""></image>
						</view>
						<image style="width: 100%;height: 100%;" :src="form.invoicePhoto" mode="scaleToFill"></image>
					</view>
				</view>
			</view>
			<view class="item-box">
				<view class="title">
					备注
				</view>
				<input class="text" v-model="form.remark" placeholder="请输入备注"/>
			</view>
			<button @click="submitForm">提交</button>
		</view>
	</view>
</template>

<script>
	import config from '@/config'
	import {
		lvBuyList,
		payApplyAddForUnion,
		payApplyAddForDeposit,
		generateMoneyList
	} from "@/api/system/index"
	const baseUrl = config.baseUrl
	export default {
		data() {
			return {
				baseUrl:config.baseUrl,
				datetimesingle: '',
				info: {
				},
				list:[],
				form:{
					invoicePhoto:''
				},
				dimg:''
			}
		},
		watch: {
			datetimesingle(newval) {
				console.log('单选:', this.datetimesingle);
			},
		},
		mounted() {
			setTimeout(() => {
				this.datetimesingle = Date.now() - 2*24*3600*1000
			},3000)
		},
		onLoad(e) {
			this.info = JSON.parse(e.info)
			this.form.buyId=this.info.id;
			this.form.totalMoney=this.info.dingjin;
			this.form.supplierId=this.info.supplierId;
			this.form.applyTime = this.datetimesingle
			this.getInfo()
		},
		methods: {
			imgsBackBnt() {
				let imgsArray = [];
				imgsArray[0] = this.form.invoicePhoto;
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			imgbackBnt() {
				this.form.invoicePhoto = ''
			},
			addphotoBackBnt() {
				uni.chooseImage({
					count: 1,
					type: 'image',
					success: (res) => {
						for (var i in res.tempFilePaths) {
							uni.showLoading({
								title: '上传图片中~',
								mask: true
							})
							uni.uploadFile({
								url:this.baseUrl + '/common/upload',
								filePath: res.tempFilePaths[i],
								name: 'file',
								header: {
									Authorization:'Bearer ' +  uni.getStorageSync('App-Token')
								},
								success: (uploadFileRes) => {
									if (JSON.parse(uploadFileRes.data).code == 200) {
										// this.$tools.toast('上传成功～')
										uni.hideLoading();
										this.form.invoicePhoto = JSON.parse(uploadFileRes.data).url
										this.dimg = JSON.parse(uploadFileRes.data).fileName
									} else {
										uni.hideLoading();
										// this.$tools.toast('图片上传失败，请重试～')
									}
								}
							});
						}
					}
				});
			},
			changeLog(e) {
							console.log('change事件:', e);
						},
			submitForm() {
				if (!this.form.applyTime || !this.form.totalMoney) {
					uni.showToast({
						title: '申请时间和申请金额为必填项',
						icon: 'none'
					})
					return
				}
				uni.showModal({
					title: '提示',
					content: '确定提交申请吗？',
					success :(res)=> {
						if (res.confirm) {
							var data = {}
							data = this.form
							data.payApplyBuyDetailList = this.list
							data.invoicePhoto = this.dimg
							payApplyAddForDeposit(data).then(res=>{
								setTimeout(res=>{
									uni.navigateBack()
								},100)
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				// 提交表单逻辑
			},
			bindDateChange(e) { // 新增日期选择事件
				this.form.applyTime = e.target.value
			},
			getInfo() {
				generateMoneyList({buyId:this.info.id,totalMoney:this.info.dingjin}).then(res => {
					this.list = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 20rpx;
		.photo-list {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}
		.photo-item {
			margin-left: 18rpx;
			margin-top: 20rpx;
			width: 148rpx;
			height: 148rpx;
			border-radius: 12rpx;
			background: #F7F6F9;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			.images {
				width: 60rpx;
				height: 60rpx;
			}
			.close-box {
				position: absolute;
				display: flex;
				align-items: center;
				justify-content: center;
				top: 0;
				right: 0;
				width: 45rpx;
				height: 45rpx;
				background: rgba(0, 0, 0, 0.60);
				border-radius: 0 8rpx 0 8rpx;
				z-index: 5;
				
				.icon {
					width: 20rpx;
					height: 20rpx;
				}
			}
		}
		.list-box {
			padding: 20rpx;
			background: #ffffff;
			border-radius: 8rpx;
			.title {
				padding-top: 20rpx;
				padding-bottom: 20rpx;
				color: #333;
				font-size: 28rpx;
				font-weight: bold;
			}
			.item-box {
				padding-top: 15rpx;
				padding-bottom: 15rpx;
				padding-left: 10rpx;
				display: flex;
				align-items: center;
				border-top: 1px solid #EDEDED;
				.title {
					color: #999999;
					width: 180rpx;
				}
				.text {
					width: 420rpx;
				}
				.picker {
					width: 420rpx;
				}
			}
			button {
				margin-top: 20rpx;
				width: 100%;
				background-color: #1aad19;
				color: white;
				border: none;
				padding: 10rpx 0;
				border-radius: 8rpx;
			}
		}
	}
</style>